<template>
	<view>
		<l-file ref="lFile" @up-success="onSuccess"></l-file>
		<view class="title">最多上传100个文件 单个文件不超过1g</view>
		<button type="primary" size="mini" @tap="onUpload">选择文件</button>
		<view class="file-block">
			<view class="file-item" v-for="(item,index) in fileList" :key=index >
				<div>{{item.fileName}}
				<text @click="handleRemove(index)" v-if="item.originalFileName != ''"class="iconfont iconziyuan1">
				</text></div> 
				<image style="width: 100rpx;height: 100rpx;" @click="priview(item)" v-if="item.type == 'image'" :src="item.src+'?download=0'" mode=""></image>
				<video style="width: 200rpx;height: 150rpx;" v-if="item.type == 'video'" :src="item.src+'?download=0'" controls></video>
				<audio controls :name="item.originalFileName" v-if="item.type == 'music'" :src="item.src+'?download=0'" ></audio>
				<cmd-progress v-if="item.type == 'other'" :percent="item.progress"></cmd-progress>
			</view>
		</view>
		
	</view>
</template>

<script>
	var _self
	export default {
		props: {
		  limit: {
		    type: Number,
		    default: 5
		  },
		  url: {
		    type: String,
		    required: true
		  },
		  name: {
		    type: String,
		    default: 'file'
		  },
		  fileDescription: {
			  type: String,
			  default: ''
		  },
		  formData: {
		    type: Object,
		    default () {
		      return {}
		    }
		  },
		  header: {
		    type: Object,
		    default () {
		      return {}
		    }
		  },
		  fileList: {
		    type: Array,
		    default () {
		      return []
		    }
		  }
		},
		data() {
		  return {
		  }
		},
		created() {
			_self = this
		},
		methods: {
			/* 上传 */
			onUpload() { 
				if(this.fileDescription == ''){
					uni.showToast({
						icon:"none",
						title:"请先填写上传文件说明"
					})
					return
				}
				this.$refs.lFile.upload({
					// #ifdef APP-PLUS
					currentWebview: this.$mp.page.$getAppWebview(),
					// #endif
					url: _self.url+"?fileDescription="+_self.fileDescription
				});
			},
			onSuccess(res) {
				console.log('上传成功回调',JSON.stringify(res));
				this.isComplete = true
				var response = JSON.parse(res.data.id)
				console.log(response)
				var fl = {
					progress : 100,
					group: "",
					fileName: "",
					src: "",
					originalFileName: "",
					type: "",
					md5: "",
				}
				if(response.code == 20000){
				    fl.src = response.data.fileUrl
				    fl.group = response.data.fileGroup 
					fl.md5 = response.data.md5
				    fl.fileName = response.data.fileName
					if(_self.utils.imgsuffixList.indexOf(response.data.extension) != -1){
						fl.type = "image"
					}else if(_self.utils.videosuffixList.indexOf(response.data.extension) != -1){
						fl.type = "video"
					}else if(_self.utils.musicsuffixList.indexOf(response.data.extension) != -1){
						fl.type = "music"
					}else{
						fl.type = "other"
					}
					_self.fileList.push(fl)
					uni.showToast({
						icon:"none",
						title:"文件上传成功"
					})
				}else{
				    uni.showToast({
					  icon:"none",
					  title:"上传失败"
				    })
				}
				console.log("fl",fl)
			},
			handleRemove(index) {
			  var fl = this.fileList[index]
			  uni.request({
				url: _self.utils.basicUrl+"/file/delete?md5="+fl.md5+"&id="+fl.id,
				method: "DELETE",
				data: {},
				success: function(res) {
					if(res.data.code === 20000){
						uni.showToast({
							icon:"none",
							title:"删除成功"
						})
						_self.fileList.splice(index,1)
					}else{
						_self.utils.requestFail(res)
					}
				},
				fail: () => {
					uni.showToast({
						icon:"none",
						title: '网络错误'
					})
				},
				complete() {
					
				}
			  })
			},
			priview(item){
				// 预览图片
				var fl = []
				fl.push(item.filePath)
				uni.previewImage({
					urls: fl,
				});
			}
		}
	}
</script>

<style>
	.title {
		margin: 20rpx 0;
	}
	.iconziyuan1{
		width: 25rpx;
		height: 25rpx;
		margin-left: 30rpx;
		border-radius: 50%;
	}
	.content {
		width: 100%;
		overflow: hidden;
	}
	.path{
		font-size: 14px;
		word-break:break-all;
	}
</style>
